<template>
  <div class="fans-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">粉丝</h1>
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="filter-header">
        <i class="filter-icon">⚙</i>
        <span>筛选</span>
      </div>
      <div class="filter-content">
        <el-input v-model="filterForm.name" placeholder="输入粉丝姓名" class="filter-input" />
        <el-date-picker v-model="filterForm.createTime" type="date" placeholder="创建时间" class="filter-date" />
        <el-button type="primary" @click="handleFilter">筛选</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </div>

    <!-- 粉丝列表 -->
    <div class="user-list-section">
      <div class="list-header">
        <i class="list-icon">📋</i>
        <span>粉丝列表</span>
      </div>

      <el-table :data="fansList" style="width: 100%" v-loading="loading" element-loading-text="加载中...">
        <el-table-column prop="name" label="粉丝姓名" width="200" align="center" />
        <el-table-column prop="phone" label="手机号" width="200" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="table-footer">
        <div class="data-info">
          <span>共{{ totalPages }}页/{{ total }}条数据</span>
        </div>
        <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
          layout="prev, pager, next" @current-change="handlePageChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { apiClient } from '@/api/doctor'

const router = useRouter()
const route = useRoute()

// 筛选表单
const filterForm = reactive({
  name: '',
  createTime: null as Date | null
})

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const totalPages = ref(0)
const loading = ref(false)

// 粉丝列表数据
const fansList = ref([])

// 获取粉丝列表
const fetchFansList = async () => {
  try {
    loading.value = true

    // 构建查询参数
    const queryParams: any = {
      pageIndex: currentPage.value,
      pageSize: pageSize.value,
      doctorId: route.query.doctorId || 0,
      name: '',
      createTime: ''
    }

    // 添加筛选条件
    if (filterForm.name) {
      queryParams.name = filterForm.name
    }
    if (filterForm.createTime) {
      queryParams.createTime = filterForm.createTime.toISOString().split('T')[0]
    }

    const result = await apiClient.get('/api/DoctorGetFanList', {
      params: queryParams
    })

    if (result.data.code === 100) { // Success
      fansList.value = result.data.data.data
      total.value = result.data.data.totalCount
      totalPages.value = result.data.data.totalPages
      ElMessage.success('获取粉丝列表成功')
    } else {
      ElMessage.error(result.data.message || '获取粉丝列表失败')
    }
  } catch (error: any) {
    console.error('获取粉丝列表失败:', error)
    ElMessage.error(error.message || '网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 格式化日期时间
const formatDateTime = (dateTimeStr: string) => {
  if (!dateTimeStr) return ''
  const date = new Date(dateTimeStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 事件处理
const handleFilter = () => {
  currentPage.value = 1 // 重置到第一页
  fetchFansList()
}

const handleReset = () => {
  filterForm.name = ''
  filterForm.createTime = null
  currentPage.value = 1
  fetchFansList()
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchFansList()
}

const goBack = () => {
  router.go(-1)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchFansList()
})
</script>

<style scoped>
.fans-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.filter-section,
.user-list-section {
  background: white;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-header,
.list-header {
  background: #f0f0f0;
  padding: 12px 16px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #666;
}

.filter-content {
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-input {
  width: 200px;
}

.filter-date {
  width: 150px;
}

.user-list-section {
  padding-bottom: 0;
}

.table-footer {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
}

.data-info {
  color: #666;
  font-size: 14px;
}

:deep(.el-table) {
  border-radius: 0;
}

:deep(.el-table th) {
  background-color: #fafafa;
  text-align: center;
}

:deep(.el-table td) {
  text-align: center;
}

:deep(.el-table .cell) {
  text-align: center;
}
</style>